<template>
  <transition name="up">
    <div class="playSong" v-show="showMusic" @click="close">
      <div class="playing-header">
        <div class="title">
          <p>当前播放歌曲 ({{this.playList.length}})</p>
          <div class="more">
            <div>
              <i class="playlist_mode" @click="changeMode"></i><span :class="iconMode">{{ modeText }}</span>
            </div>
            <span><i class="icon-clear" @click.stop="showConfirm"></i></span>
          </div>
        </div>
        <Scroll :data="playList" ref="scroll" class="wrapper">
          <ul class="content">
            <li class="songItem" v-for="(item,index) in playList" :key="item.mid" @click="changeSong(index)">
              <div class="itemName">
                <i class="playing" :class="item.mid === currentSong.mid ? 'icon-play': ''"></i>
                <span class="songName">{{ item.name}}</span>
              </div>
              <div class="more-func">
                <i class="icon-close" @click.stop="deleteOne(index)"></i>
              </div>
            </li>
          </ul>
        </Scroll>
      </div>
      <div class="close" @click="close">关闭</div>
      <Confirm ref="confirm" text="是否清空列表"  confirmBtnText="清空" @confirm = "clearSearchHistory"></Confirm>
    </div>
  </transition>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
import Scroll from '@/components/base/Scroll'
import Confirm from '@/components/base/Confirm'
import { playerMixin } from '../../common/js/mixin'
export default {
  mixin: [playerMixin],
  components: {
    Scroll,
    Confirm
  },
  data () {
    return {
      showMusic: false,
      playMode: { // 播放模式
        sequence: 0, // 顺序
        loop: 1, // 循环
        random: 2 // 随机
      }
    }
  },
  methods: {
    ...mapMutations(['setCurrentIndex', 'setPlayList', 'setSequenceList', 'setPlaying']),
    show () {
      this.showMusic = true
    },
    close () {
      this.showMusic = false
    },
    showConfirm () {
      this.$refs.confirm.show()
    },
    // 切歌
    changeSong (index) {
      this.setCurrentIndex(index)
      //  暂时有问题
      // console.log('当前播放歌曲', this.historyPlay[index])
    },
    // 改变播放模式
    changeMode () {
      this.$emit('changeMode')
    },
    // 清除历史播放
    clearAll () {
      this.setPlayList([])
      this.setCurrentIndex(-1)
      this.setSequenceList([])
      this.setPlaying(false)
    },
    clearSearchHistory () {
      this.clearAll()
    },
    // 删除某一首歌
    deleteOne (index) {
      this.playList.splice(index, 1)
      if (index < this.currentIndex) {
        this.setCurrentIndex(this.currentIndex - 1)
      }
      // 就一首歌
      if (index === this.playList.length) {
        this.setCurrentIndex(0)
      }
      // 如果清空了列表
      if (this.playList.length === 0) {
        this.clearAll()
      }
      this.setPlayList(this.playList)
      this.setSequenceList(this.playList)
    }
  },
  watch: {
    showMusic () {
      setTimeout(() => {
        this.$refs.scroll.refresh()
      }, 20)
    }
  },
  computed: {
    ...mapState(['playList', 'currentSong', 'currentIndex']),
    // 播放模式图标
    iconMode () {
      return this.mode === this.playMode.sequence ? 'icon-sequence' : this.mode === this.playMode.loop ? 'icon-loop' : 'icon-random'
    },
    modeText () {
      return this.mode === this.playMode.sequence ? '顺序播放' : this.mode === this.playMode.random ? '随机播放' : '单曲循环'
    }
  }
}
</script>
<style lang="stylus" scoped>
@import "../../common/stylus/variable"

.up-enter-active, .up-leave-active {
  opacity: 1;
  transition: all .5s;
}
.up-enter, .up-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.playSong {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background:$color-background-d;
  .playing-header {
    position: absolute;
    left: 0;
    bottom: 50px;
    width: 100%;
    height: 400px;
    background-color $color-highlight-background;
    border-radius: 20px 20px 0 0;
    padding: 20px 20px 0;
    box-sizing:border-box;
    p {
      height: 24px;
      line-height: 24px;
    }
    .more {
      display: flex;
      height: 24px;
      align-items: center;
      justify-content: space-between;
      color: $color-theme;
      .sequence {
        margin-left: 10px;
      }
      span {
        display: inline-block;
      }
    }
    .wrapper {
      width: 100%;
      margin-top: 10px;
      height: calc(100% - 60px);
      // height:20px;
      // background: orange;
      overflow: hidden;
      .songItem {
        display:flex;
        height: 20px;
        justify-content: space-between;
        align-items: center;
        padding: 6px 0;
        color: $color-text-d;
        .itemName {
          display:flex;
          justify-content: space-between;
          align-items: center;
          .playing {
            display: inline-block;
            min-height: 20px;
            min-width: 20px;
            margin-right: 4px;
            color: $color-theme;
          }
          .songName {
            display: inline-block;
            // width: 280px;
            max-width: 280px;
            overflow: hidden;
            white-space:nowrap;
            text-overflow: ellipsis;
          }
        }
        .more-func {
          i {
            display: inline-block;
            margin-left: 10px;
            color: $color-theme;
          }
        }
      }
    }
  }
}
.close {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align:center;
  background-color: $color-background;
}
</style>
